<template>
    <el-form
          label-width="auto"
          style="max-width: 600px"
          :model="formLabelAlign"
        >
          <el-form-item label="账号" placeholder="请输入账号" >
            <el-input v-model="formLabelAlign.name"/>
          </el-form-item>
          <el-form-item label="密码" placeholder="请输入密码" type="password">
            <el-input v-model="formLabelAlign.pass" />
          </el-form-item>
          <el-form-item label="地区" placeholder="请输入地区" type="text">
            <el-select v-model="formLabelAlign.select">
               <el-option v-for="item in optionData" :key="item.value" :label="item.label" :value="item.label" />
            </el-select>
          </el-form-item>
          <el-button @click="btnOk">确定</el-button>
        </el-form>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import { defineProps } from 'vue';
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router';

const router = useRouter();

const props = defineProps({
  formLabelAlign: {
    type: Object,
    default: () => ({ name: '', pass: '' })
  }
});
const formLabelAlign = ref({
  name: '',
  pass: '',
  select:''
});

const optionData = ref([
  {label:"郑州",value:"shagnhai"},
  {label:"南阳",value:"beijing"},
  {label:"信阳",value:"xinjiang"},
  {label:"开封",value:"xizang"},
  {label:"洛阳",value:"nanjing"}
])

const btnOk = () => {
  if (formLabelAlign.value.name === "kuang" && formLabelAlign.value.pass === "123456"){
    ElMessage({
      message: `登陆成功!,登录的地区为${formLabelAlign.value.select}`,
      type: 'success',
  })
    router.push({ name: 'game' });
  }else {
    ElMessage.error("密码或账号错误!")
    formLabelAlign.value = {
        name:'',
        pass:'',
        select:''
    }
  }
};
</script>
<script lang="ts">
export default {
  name: 'LofinForm'
}
</script>
<style scoped>

</style>